﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="vue.js"></script>
		<style>
			div {
				width: 400px;
			}
			.tab-button {
			  padding: 6px 10px;
			  border-top-left-radius: 3px;
			  border-top-right-radius: 3px;
			  border: 1px solid #ccc;
			  cursor: pointer;
			  background: #f0f0f0;
			  margin-bottom: -1px;
			  margin-right: -1px;
			}
			.tab-button:hover {
			  background: #e0e0e0;
			}
			.tab-button.active {
			  background: #cdcdcd;
			}
			.tab {
			  border: 1px solid #ccc;
			  padding: 10px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<button
			  v-for="tab in tabs"
			  :key="tab.title"
			  :class="['tab-button', { active: currentTab === tab.title }]"
			  @click="currentTab = tab.title">
			  {{ tab.displayName }}
			</button>
			
				<component
				  v-bind:is="currentTabComponent"
				  class="tab">
				</component>
			
		</div>
	
		<script>
			Vue.component('tab-introduce', { 
				data(){
					return {
						content: 'Vue.js无难事'
					}
				},
				template: '<div><input v-model="content"></div>'
			})
			Vue.component('tab-comment', {
				template: '<div>这是一本好书</div>',
				data(){
					return {
						count: 0
					}
				},
				beforeCreate () {
			    console.log('--------' + 'beforeCreated' + '--------')
			    console.log("$el: " + this.$el)
			    console.log("$data: " + this.$data)
			    console.log("data.count: " + this.count)
			  },
			  created () {
			    console.log('--------' + 'created' + '--------')
			    console.log("$el: " + this.$el)
			    console.log("$data: " + this.$data)
			    console.log("data.count: " + this.count)
			  },
			  beforeMount () {
			    console.log('--------' + 'beforeMount' + '--------')
			    console.log("$el: " + this.$el)
			    console.log("$data: " + this.$data)
			    console.log("data.count: " + this.count)
			  },
			  mounted () {
			    console.log('--------' + 'mounted' + '--------')
			    console.log("$el: " + this.$el)
			    console.log("$data: " + this.$data)
			    console.log("data.count: " + this.count)
			  },
			  beforeUpdate () {
			  	console.log('--------' + 'beforeUpdate' + '--------')
			    console.log("$el: " + this.$el)
			    console.log("$data: " + this.$data)
			    console.log("data.count: " + this.count)
			  },
			  updated () {
			    console.log('--------' + 'updated' + '--------')
			    console.log("$el: " + this.$el)
			    console.log("$data: " + this.$data)
			    console.log("data.count: " + this.count)
			  },
			  activated () {
			  	console.log('--------' + 'activated' + '--------')
			    console.log("$el: " + this.$el)
			    console.log("$data: " + this.$data)
			    console.log("data.count: " + this.count)
			  },
			  deactivated () {
			  	console.log('--------' + 'deactivated' + '--------')
			    console.log("$el: " + this.$el)
			    console.log("$data: " + this.$data)
			    console.log("data.count: " + this.count)
			  },
			  beforeDestroy () {
			    console.log('--------' + 'beforeDestroy' + '--------')
			    console.log("$el: " + this.$el)
			    console.log("$data: " + this.$data)
			    console.log("data.count: " + this.count)
			  },
			  destroyed () {
			    console.log('--------' + 'destroyed' + '--------')
			    console.log("$el: " + this.$el)
			    console.log("$data: " + this.$data)
			    console.log("data.count: " + this.count)
			  }
			})
			Vue.component('tab-qa', { 
				template: '<div>有人看过吗？怎么样？</div>' 
			})

			var vm = new Vue({
			  el: '#app',
			  data: {
			    currentTab: 'introduce',
			    tabs: [
			    	{title: 'introduce', displayName: '图书介绍'}, 
			    	{title: 'comment', displayName: '图书评价'},
				   	{title: 'qa', displayName: '图书问答'}
			    ]
			  },
			  computed: {
			    currentTabComponent: function () {
			      return 'tab-' + this.currentTab
			    }
			  }
			})
		</script>
	</body>
</html>